<template>
  <div class="page-box">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {

data(){
    return{
      pageSizes:5,
      currentPages:1 
        // pageSize:5,//每页条数
        // currentPage:1  //默认当前页为第一页
        }
    },
    props:['total','pageSize','currentPage'],
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            // this.pageSize=val;
            this.pageSizes= val;

            this.$emit('pageChange', {pageSize:this.pageSizes,currentPage:this.currentPages})
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            // this.currentPage=val;
            this.currentPages=val;
            this.$emit('pageChange', {pageSize:this.pageSize,currentPage:this.currentPages})
        }
    },
}
</script>

<style lang="less" scoped>
    .page-box{
    display: flex;
    justify-content: center;
    padding-top: 1rem;
  }
</style>